<template>
  <div>
    <DialogNew
      v-model="is_show"
      @close="close"
      title="供应商品牌申请-区域"
      width="500px"
    >
      <div class="padding-sm" v-loading="loading">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
          <el-form-item prop="id" v-if="false" />
          <el-form-item label="品牌" prop="brand_id">
            <el-select
              v-model="form.brand_id"
              placeholder="请选择品牌"
              style="width: 250px"
            >
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="申请区域" prop="province">
            <el-select
              v-model="form.province"
              placeholder="请选择省份"
              style="width: 250px"
              @change="getCityAreaListData('city', form.province)"
              clearable
              filterable
            >
              <el-option
                v-for="item in areaObj.province"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
            <el-select
              v-model="form.city"
              placeholder="请选择市"
              style="width: 250px; margin: 10px 0"
              @change="getCityAreaListData('area', form.city)"
              clearable
              filterable
            >
              <el-option
                v-for="item in areaObj.city"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
            <el-select
              v-model="form.area"
              placeholder="请选择区县"
              style="width: 250px"
              clearable
              filterable
            >
              <el-option
                v-for="item in areaObj.area"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="is_show = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" v-repeat>
          确定
        </el-button>
      </template>
    </DialogNew>
  </div>
</template>

<script setup>
  import {
    getallAdminBrandList,
    getCityAreaList,
    addBrandArea,
    reGetBrandArea,
  } from '@/api/brand'
  import DialogNew from '@/components/DialogNew/index.vue'
  import { message } from '~/src/utils/helper'
  const is_show = ref(false)
  const emits = defineEmits(['fetch-data'])
  const loading = ref(false)

  const form = reactive({
    id: undefined,
    brand_id: undefined,
    province: '',
    city: '',
    area: '',
  })
  const open = async (row) => {
    is_show.value = true
    await getCityAreaListData()
    if (row) {
      form.id = row.id
      form.brand_id = row.brand_id
      const code = row.area_code.split('-')
      form.province = code[0] || ''
      if (code[0] && !code[1]) {
        await getCityAreaListData('city', code[0], 'reback')
        return
      }
      if (code[1]) {
        form.city = code[1] || ''
        await getCityAreaListData('city', code[0], 'reback')
        await getCityAreaListData('area', code[1], 'reback')
      }
      if (code[2]) {
        form.area = code[2] || ''
      }
    }
  }

  const close = () => {
    formRef.value.resetFields()
    Object.assign(form, {
      brand_id: undefined,
      province: '',
      city: '',
      area: '',
      id: undefined,
    })
    Object.assign(areaObj, {
      province: [],
      city: [],
      area: [],
    })
  }

  const rules = reactive({
    brand_id: { required: true, message: '请输入名称', trigger: 'change' },
    province: { required: true, message: '请选择省份', trigger: 'change' },
  })

  const areaObj = reactive({
    province: [],
    city: [],
    area: [],
  })
  // 获取省数据
  const getCityAreaListData = async (type = 'province', code, reback) => {
    const res = await getCityAreaList({
      parent_code: code,
    })
    switch (type) {
      case 'province':
        areaObj.province = res.data
        break
      case 'city':
        areaObj.city = res.data
        if (!reback) {
          form.city = ''
          form.area = ''
        }
        break
      case 'area':
        areaObj.area = res.data
        !reback && (form.area = '')
        break
    }
  }

  const formRef = ref(null)
  const handleSubmit = () => {
    formRef.value
      .validate((valid) => {
        if (valid) {
          loading.value = true
          let area_code = '',
            area = ''
          if (form.province) {
            area_code = area_code + form.province
            area = areaObj.province.find(
              (item) => item.code === form.province
            ).name
            if (form.city) {
              area_code = area_code + '-' + form.city
              area = areaObj.city.find((item) => item.code === form.city).name
            }
            if (form.area) {
              area_code = area_code + '-' + form.area
              area = areaObj.area.find((item) => item.code === form.area).name
            }
          }
          !form.id
            ? addBrandArea({
                id: form.id,
                brand_id: form.brand_id,
                area_code,
                area,
              }).then((res) => {
                message('添加成功')
                is_show.value = false
                emits('fetch-data')
              })
            : reGetBrandArea({
                id: form.id,
                brand_id: form.brand_id,
                area_code,
                area,
              }).then((res) => {
                message('修改成功')
                is_show.value = false
                emits('fetch-data')
              })
        }
      })
      .finally(() => {
        loading.value = false
      })
  }
  const brandList = ref([])
  onMounted(async () => {
    const res = await getallAdminBrandList()
    console.log(res)
    brandList.value = res.data
  })

  defineExpose({ open })
</script>

<style lang="scss" scoped></style>
